<!--
 * @Description: 节流函数 + 搜索
 * @Autor: zhangbing
 * @Date: 2021-07-28 10:54:08
 * @LastEditors: zhangbing
 * @LastEditTime: 2021-07-28 12:04:06
-->
<template>
  <div id="app">
    <input type="text" placeholder="请搜索" @input="searchAction($event)">

    <ul v-if="searchResult.length > 0">
      <li v-for="(item,index) of searchResult" :key="index">
        <div>
          <img :src="item.course_img" :alt="item.course_name">
        </div>
        <h1>{{item.course_name}}</h1>
      </li>
    </ul>

    <ul v-else>
      <li v-for="(item,index) of coursesData" :key="index">
        <div>
          <img :src="item.course_img" :alt="item.course_name">
        </div>
        <h1>{{item.course_name}}</h1>
      </li>
    </ul>

    
  </div>
</template>

<script>

import {coursesData} from '@/datas/courses'
import throttle from '@/utils/throttle'

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      coursesData,
      searchResult: []
    }
  },
  methods: {
    searchAction: throttle(function(e) {
      const inputValue = e.target.value

      this.searchResult = this.coursesData.filter((item) => {
        if(item.course_name.includes(inputValue)) {
          return item
        }
      })

      console.log(this.searchResult);
    }, 1000)
  }
}
</script>

<style>
  ul, li {
    list-style: node;
  }
</style>
